<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item
        style="letter-spacing: 1px; margin-top: 15px"
        v-for="(item, index) in list"
        :key="index"
        :timestamp="item.startTime"
        placement="top"
      >
        <el-card>
          <h4 class="activity_concent">{{ item.concent }}</h4>
          <h4 class="activity_end_time">活动结束时间：{{ item.enTime }}</h4>
          <el-button
            type="text"
            @click="handleRegister(item)"
            class="activity_button"
            >立即参加</el-button
          >
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "activity",
      list: [
        {
          startTime: "2022-03-5",
          enTime: "2022-04-1",
          concent:
            "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长  ",
        },
        {
          startTime: "2022-03-6",
          enTime: "2022-04-2",
          concent:
            "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长  ",
        },
        {
          startTime: "2022-03-8",
          enTime: "2022-04-9",
          concent:
            "活动简述:为了满足广大儿童与家长的娱乐、交流、学习需求,让我们的孩子们有-块专属于自己的屏幕与天空，晚报拟将晚报内部电影厅打造成专属的儿童亲子影院，定期播放专属儿童的各类电影与演出活动,如英语专场、爸爸去看电影专场、假期电影周、动漫专场等等,让亲子家庭在娱乐中提升、在快乐中沉思。同时影院将并与商业机构合作,开展各类知识讲座与交流,如儿童保险、家庭理财、儿童教育、母婴用品交流等等，在丰富儿童的业余生活，服务亲子家庭的基本需求的同时，促进家庭和谐，让父母与子女相互尊重、共同教育、-起成长  ",
        },
      ],
      from: {
        aid: "",
        uid: "",
      },
      login: false,
    };
  },
  methods: {
    handleRegister(item) {
      if (this.login == false) {
        this.$confirm("系统未检测到登陆信息, 是否去登陆?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.$router.push("/login");
        });
      } else {
        this.$message({
          type: "success",
          message: "活动报名成功",
        });
      }
    },
  },
};
</script>
<style lang="scss">
.block {
  width: 1400px;
  margin: 0 auto;
  // background: pink;
  .activity_concent {
    font-size: 18px;
    margin: 13px;
  }
  .activity_end_time {
    margin: 13px;
    color: #91949c;
  }
  .activity_button {
    margin-left: 13px;
  }
}
</style>